@extends('layouts.appManager')

@section('title')服务器续费 - @endsection

@section('content')
	<input type="hidden" id="dataPrice" value="{{config('conf.serverPrice')}}">
	<input type="hidden" id="dataServerId" value="{{$server->id}}">
	<input type="hidden" id="dataMoney" value="{{Auth::user()->remain_money}}">

<div class="container py-5" id="app">
    <div class="row justify-content-center">
        <div class="col-12">
            <div class="card panel mb-4">
                <div class="card-header">{{$server->name}} 续费 - <small>@{{ price }} 积分/月</small></div>

                <div class="card-body">
                	<form action="/manager/buyServerDo" method="get">
	                	<div class="row">
	                		<div class="col-md-6">
		                		<div class="input-group mt-2">
							        <div class="input-group-prepend">
							          <div class="input-group-text">购买时间</div>
							        </div>
							        <input type="number" min="1" step="1" max="1000" class="form-control" v-model="count">
                                    <div class="input-group-append">
                                        <div class="input-group-text">月</div>
                                    </div>
                                </div>
		                	</div>

		                	<div class="col-md-6">
		                		<div class="input-group mt-2">
							        <div class="input-group-prepend">
							          <div class="input-group-text">消耗积分</div>
							        </div>
							        <input type="text" class="form-control" :value="count*price" readonly>
						        </div>
		                	</div>
	                	</div>  

	                	
	                	<div class="text-center mt-5">
	                		<button v-if="can" class="btn btn-success" type="button" @click="buy()">立即购买</button>
	                		<button v-else class="btn btn-danger" type="button" disabled>积分不足</button>
	                	</div>
                    </form>
                </div>
            </div>
        </div>
    </div>

</div>


@endsection



@section('script')
	<script>
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        var app = new Vue({
            el: '#app',
            data: {
                serverId:0,
                price:0,
				count:3,
                money:0,
            },
            mounted() {
                this.price=$('#dataPrice').val();
                this.serverId=$('#dataServerId').val();
                this.money=$('#dataMoney').val();
            },
            computed:{
                can:function(){
                    return this.count*this.price<=this.money;
                }
            },
            methods:{
                buy(){
                    $.ajax({
                        type : "POST",
                        url : "/manager/ajaxBuyServer",
						data: {serverId:this.serverId,time:this.count},
                        success : function(res){
                            if (res.err===0){
                                alert('续费成功');
                            }else{
                                alert(res.msg);
                            }
                        }
                    });
				}
			}
        })
	</script>
@endsection